AULA01 - Introdução ao Desenvolvimento WEB¶

AGENDA¶

  • Apresentação HTML
  • Apresentação CSS
  • Apresentação Javascript
  • Coletânea de HTML | CSS | Javascript
  • Ferramentas de Desenvolvimento
  • Referências
  • Perguntas

1. Apresentação HTML¶

1.1. HTML¶

  • HTML: Linguagem de marcação de hipertexto -- Hypertext Markup Language.
    • Hipertexto: conjunto de elementos.
    • Elementos: podem ser palavras, imagens, vídeos, áudios, documentos etc.
  • É utilizada para definir como o conteúdo de um determinado documento deve ser exibido pelo navegador.
  • O autor cria sua página, o navegador interpreta e exibe.
  • Pode ter as seguintes as extensões: .html, .htm.
  • Para criação de páginas da web, utiliza-se editores de texto ou ferramentas de desenvolvimento.
  • Em 1989, Tim Bernes-Lee escreveu um sistema chamado World Wide Web.
  • Ele foi responsável pela criação do primeiro navegador web, do servidor e das páginas web. Além de ter escrito as primeiras especificações para URLs, HTTP e HTML. Era capaz de rodar em sistemas Unix, Apple e Windows.
  • E foi popularizado por Marc Andreessen, somente em 1990.

Figura: Navegador Mosaic 1990

Fonte: Parece pouco intuitivo, mas, na época, era revolucionário (Divulgação: NCSA)

  • Posteriormente, surgiu seu primeiro concorrente: Netscape Navigator.
  • De acordo com Blog Hostmidia (2022?), foi o nome dominante em termos de navegador até o final dos anos 90, tendo inaugurado conceitos que mais tarde se tornariam padrões fundamentais de qualquer browser: uso de cookies, fontes personalizadas, cor de fundo etc. Em seguida, a Microsoft lançou o Internet Explorer. E a Apple para não ficar para trás, lançou o Konqueror.

Observação:¶

  1. Para navegar pela internet nas páginas estáticas armazenadas desde sua criação, acesse Archive.org.
  2. Para consultar a popularidade dos navegadores nos últimos 25 anos, consulte no Portal R7 Tecnologia e Ciencia (2020).

1.2. W3C - World Wide Web Consortium¶

  • Entre 1993 e 1995: surgiram novas versões do HTML —> HTML+, HTML2.0, HTML3.0 (ainda não era considerado um padrão).
  • Em 1994, fundou o consórcio chamado World Wide Web (W3C) no laboratório de ciência da computação do MIT que agrega empresas, órgãos governamentais e organizações independentes, e com objetivos de desenvolver padrões para a criação e a interpretação de conteúdos para a Web.
  • Tinha como objetivo: desenvolver padrões para a criação e interpretação de conteúdos da Web.

  • Em 1997: o grupo de trabalho do W3C, responsável por manter o padrão do código, lançou a versão HTML3.2 como um padrão de linguagem para web.

  • Os padrões HTML5 e CSS do W3C são os pilares tecnológicos sobre os quais todas as páginas Web são construídas.

Observação:¶

  1. W3C, consulte W3C, Wiki.
  2. Programa de Escritórios da W3C no mundo, consulte Escritórios. E a partir de janeiro de 2020, evoluiu para Programa de Capítulos do W3C, acesse Capítulos.
  3. Grupos de trabalho no Brasil, consulte GT.

1.3. WHAT Working Group¶

  • Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web.
  • O WHATWG foi fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004.

Observação:¶

  1. WHATWG, consulte WHATWG.
    • Eles não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas organizações se juntaram para escrever o que seria chamado hoje de HTML5. Entre outros assuntos que o WHATWG se focava era Web Forms 2.0 que foi incluído no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto.
  2. A participação no grupo é livre e você pode se inscrever por meio da página WHATWG-Participation.
  3. É possível participar das listas de email por meio da inscrição em Mail.

1.4. O que é um domínio, como registrar¶

  • Nic.br em 1 minuto, consulte Nicbrvideos - Nic.br em 1 minuto.
  • O que é um domínio, consulte Nicbrvideos - O que é um domínio?.
  • Como registrar um domínio, consulte Nicbrvideos - Como registrar um Domínio?.
  • Como registrar um domínio - Tutorial, consulte Nicbrvideos - Tutorial de registro de domínio .br ou Nic.br - Passo a passo.
  • Como redirecionar um domínio, consulte Nicbrvideos - Redirecione seu domínio .br!.

1.5. Links interessantes¶

  • Versão atual HTML:
    • Versão do HTML. Lançado em julho de 2022.
  • Documentação:
    • Documentação do Mozilla para o uso do CSS, consulte MDN Web Docs.

2. Apresentação CSS¶

2.1. CSS¶

  • CSS: Folha de estilo em cascata -- Cascading Style Sheets.
    • É uma linguagem de formatação de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.
    • Seu benefício é prover a separação entre o formato e o conteúdo de um documento.

  • Quando o HTML foi criado, as propriedades para efetuar a formatação dos documentos eram feitas no próprio código HTML. Desde então, várias tags HTML foram criadas, e a W3C introduziu o conceito de semântica na estrutura, possibilitando separar a formatação.

  • Isto significa que:

    • Por exemplo a tag <strong>, que inicialmente só permitia que o texto continue em negrito no HTML e nada mais.
    • Com o conceito de CSS, podemos redefinir esta tag, e formatar o texto com a tag <strong> para ser maiúscula ou um tipo de fonte em específico.
    • O HTML e CSS estão envolvidos há algum tempo.

  • O poder do CSS vem da habilidade e da combinação de regras para diferentes páginas de acordo com os layouts necessários.

2.2. Links interessantes:¶

  • Dicas:
    • Diversas dicas de uso do CSS, consulte CSS-TRICKS.
  • Documentação:
    • Documentação do Mozilla para o uso do CSS, consulte MDN Web Docs.
  • Versão atual CSS:
    • Status atual da especificação do CSS3, consulte W3C-CSS. Lançada em novembro de 2020.

3. Apresentação Javascript¶

3.1. Javascript (JS)¶

  • A linguagem de marcação HTML destina-se a estruturar uma página web.
  • A folha de estilo CSS destina-se a formatar o conteúdo das páginas aplicando estilos. A versão anterior ao HTML5, não possuía funcionalidades para adicionar interatividade avançada às páginas.
  • Javascript: foi criada pela Netscape em parceria com a Sun Microsystems, com finalidade de fornecer esta interatividade.
    • Primeiro nome foi Mocha.
    • Criador: Brendan Eich, nascido em 1961, nos EUA.
  • Em 1995: foi lançada a primeira versão -- Livescript, e em dezembro do mesmo ano, mudou-se para Javascript 1.0.
  • Em 1996: foi lançada juntamente no navegador Netscape 2.0.
  • Foi desenvolvida para rodar no lado do cliente, isto é, a interpretação e o funcionamento dependem de funcionalidades hospedadas no navegador do usuário.
  • Atualmente, é a linguagem mais usada no mundo, por estar presente na maioria dos projetos Web.

3.2. ECMA - EUROPEAN COMPUTER MANUFACTURES ASSOCIATION¶

  • Em 1996: Para que houvesse a evolução da linguagem, seus criadores se associaram ao ECMA, e passaram a seguir alguns determinados padrões e normativas.

  • O nome Javascript já havia sido patenteado pela SUN Microsystems (atual Oracle).

  • Novo nome foi necessário: junção das palavras ECMA e Javascript —> ECMAScript.

  • Em 2017: ECMAScript 2017, 8a. edição (ES8), lançado em junho de 2017.

  • Em 2018: ECMAScript 2018, 9a. edição (ES9), lançado em junho de 2018.
  • Em 2019: ECMAScript 2019, 10a. edição (ES10), lançado em junho de 2019.
  • Em 2020: ECMAScript 2020, 11a. edição (ES11), lançado em junho de 2020.
  • Em 2021: ECMASCript 2021, 12a. edição (ES12), lançado em junho de 2021.

3.3. Links interessantes:¶

  • Documentação:
    • Documentação do Mozilla para o uso do Javascript, consulte MDN Web Docs.
  • Versão atual Javascript:
    • Em 2022: ECMASCript 2022, 13a. edição (ES13), lançado em junho de 2021.

4. Coletânea de HTML | CSS | Javascript¶

  • Guia de referência de diversas publicações do Nic.br.
  • Git e Github:
    • Aulas para iniciantes. Justen, Willian.
    • Guia do Git. Primeiro Hello World no Github.
    • Youtube de GitHub Training & Guides.
  • Typescript:
    • Mini Curso de TypeScript. Justen, Willian.
  • CSS:
    • Dicas de CSS. Justen, Willian.
    • Guia sobre Flexbox do CSS.
    • Guia sobre Grid CSS.
    • Exemplos de CSS Garden.
    • Diferença entre display e visibility do CSS.
    • Uso de Emoji.
    • Uso de UNICODE.
  • Willian Justen:
    • Youtube de Justen, Willian.
  • Felipe Fialho:
    • Youtube de Fialho, Felipe.
    • Leitura rápida do artigo de Felipe Fialho O que Front-end Developers precisam saber.
    • Indicação de Felipe Fialho, video no youtube de Fabio Akita sobre A História do Front-End para Iniciantes em Programação | Série "Começando aos 40": Akita, Fabio.
  • Loiane Groner:
    • Youtube de Groner, Loiane.
  • Rafaella Ballerini:
    • Youtube de Ballerini, Rafaella.
  • Fabio Akita:
    • Youtube de Akita, Fabio.
    • Indicação no video de Fabio Akita: Front-End Developer Handbook 2019.
    • Mais uma indicação do video do Fabio Akita Juunegreiros, diversos links interessantes sobre front-end.
  • Mapas interativos para celular:
    • Biblioteca Javascript open source para mapas interativos otimizados para celular https://leafletjs.com/examples.html.
  • Developer Road-Map:
    • Kamran Ahmed.
    • Video sobre Road-Map no youtube The Road Map.
  • Guia passo a passo para se tornar um desenvolvedor frontend moderno:
    • Desenvolvedor Frontend
  • Treinamentos gratuitos:
    • Faça treinamentos Gratuitos.
  • Roadmap.sh: "é um esforço da comunidade para criar roteiros, guias e outros conteúdos educacionais para ajudar a orientar os desenvolvedores a seguir o caminho e orientar seus aprendizados".
    • Frontend
    • Backend
    • DevOps
    • React
    • Angular
    • Android
    • Python
    • Go
    • Java
    • DBA
    • AWS
    • etc
  • Canal Youtube Roadmap.sh.

4.1. Acessibilidade na web¶

  • Acessibilidade W3C e Webaim.org.
  • Dicas para começar a desenvolver para a web segundo os padrões de acessibilidade, Dicas de acessibilidade.
  • Testes de acessibilidade da W3C.
  • Estratégias, diretrizes, recursos para tornar a web acessível a pessoas com deficiências da W3C.
  • Antes e depois de aplicar a acessibilidade, exemplo W3C.
  • Cartilhas:
    • Cartilha de Acessibilidade W3C-Fascículo I
    • Cartilha de Acessibilidade W3C-Fascículo II
    • Cartilha de Acessibilidade W3C-Fascículo III
    • Cartilha de Acessibilidade W3C-Fascículo IV.
    • Cartilha de Acessibilidade W3C-Fascículo V.
  • Teste a acessibilidade de sites, se estão adequados e compatíveis com os padrões da web. Acesse Wave.

4.2. Internacionalização ou I18n¶

  • Escolhendo qual codificação usar, consulte Escolha e uso de codificação de caracteres.
  • Técnicas para aprender a Internacionalizar, consulte i18n.
  • Artigos e Tutoriais sobre i18n.
  • Dicas rápidas de Internacionalização i18n.
  • Encodings.
  • Internacionalização W3C.

4.3. Search Engine Optimization (SEO)¶

  • De acordo com MDN Web Docs, a otimização dos mecanismos de busca é o processo de fazer com que um site fique mais visível nos resultados da procura, também denominado melhoramento na classificação da busca. Vale a pena a leitura!!
  • Para aprofundamento no assunto, consulte também:
    • META TAGS E SUA IMPORTÂNCIA PARA SEO.
    • The Beginner's Guide to SEO.
    • How Search Engines Work: Crawling, Indexing, and Ranking.
    • Rockcontent.com.
    • A importância da utilização das metatags no SEO seomarketing.com.br

5. Ferramentas de Desenvolvimento¶

  • Google Lighthouse:

    • O Google Lighthouse é uma ferramenta automatizada de código aberto para medir a qualidade das páginas da web. Pode ser executado em qualquer página da web, pública ou exigindo autenticação.
    • O Google Lighthouse audita o desempenho, acessibilidade e otimização de mecanismo de pesquisa de páginas da web.
    • Acesse: Google Lighthouse.

  • Validadores de HTML | I18n | CSS | Links Quebrados:

    • Validador de marcação HMTL.
    • Validador de estilo CSS.
    • Validador de i18n.
    • Validador Unificado.
    • Validador de Links quebrados.

  • Editores e IDEs:

    • JSFiddle
    • VSCode
    • Notepad++
    • Xcode
    • TexMate
    • Atom criado pelo Github.
    • JSBin
    • Code Pen
    • AWS Cloud9
    • Sublime Text. Documentação Dicas e Atalhos.
    • Repl.it
    • Codesandbox

  • Navegadores:

    • Firefox
    • Chrome

6. Sugestão de passos a seguir para se tornar um Desenvolvedor Frontend¶

  • De acordo com o Handbook do Desenvolvedor Front-End:

    1. Domine os conceitos de HTML, CSS, DOM, JavaScript, Domínios, DNS, URLs, HTTP, navegadores e servidores, sites de hospedagem.
    2. Aprenda a linguagem de marcação HTML.
    3. Aprenda como usar a formatação de estilos por meio das propriedades CSS.
    4. Aprenda Javascript.
    5. Aprenda o DOM.
    6. Aprenda os conceitos fundamentais das interfaces de usuários (interação, usabilidade, experiência do usuário, padrões).
    7. Aprenda linhas de comando/CLI.
    8. Aprenda a prática da engenharia de software (design, arquitetura de aplicativos, modelos, Git, testes, monitoramento, automação, qualidade de código, metodologias de desenvolvimento).
    9. Aprenda a utilizar as ferramentas tal como Webpack, React, Mobx.
    10. Aprenda Node.js.

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>